<script setup>
import { reactive, ref, onMounted, onBeforeUnmount, computed, inject } from 'vue';
import empty from '@/assets/img/empty.png'
import Pagination from '../../../components/pagination.vue';
import Toast from '../../../components/toast.vue';
import { useStore } from 'vuex';
import EmptyData from '../../../components/emptyData.vue';
const store = useStore()
const common = store.state.common.obj
const api = store.state.api
const isAnchor = store.state.isAnchor
// 跳转房间
const jumpRoom = inject('methods').jumpInterRoom

// 报名进度
let anchorInfo = reactive({
    result: {}
})
const getAnchorInfo = async () => {
    await api.leg1Info({ anchorId: isAnchor ? common.userId : common.anchorId }).then(res => {
        if (res.data.result) anchorInfo.result = res.data.result
    })
}
const info = computed(() => {
    return anchorInfo.result
})
let timer
onMounted((pageAfter) => {
    getAnchorInfo()
    getApplyList(pageAfter)
    timer = setInterval(() => {
        getAnchorInfo()
        getApplyList(pageAfter)
    }, 30 * 1000);
})
onBeforeUnmount(() => {
    clearInterval(timer)
})
// 成功报名主播
let applyList = reactive({
    result: {
        list: []
    }
})
let page = ref(0)
const getApplyList = async (pageAfter) => {
    await api.successApplyList({ page: page.value }).then(res => {
        // res = {
        //     data: {
        //         result: []
        //     }
        // }
        if (res.data.result) {
            applyList.result = res.data.result
            pageAfter && pageAfter()
        }
    })
}
const rank = computed(() => {
    return applyList.result
})
const getList = (val, pageAfter) => {
    page.value = val
    getApplyList(pageAfter)
}
</script>

<template>
    <div class="leg1">
        <div class="topRule">
            <p><span>报名时间</span>03月21日00:00-24:00</p>
            <p>主播收到999个联赛票礼物，即可报名成功</p>
        </div>
        <div class="bottomList">
            <div class="infoBox" v-if="isAnchor || common.anchorId">
                <div class="info">
                    <p class="name">昵称：{{ info.anchorName }}</p>
                    <p>ID： {{ info.anchorId }}</p>
                </div>
                <div class="progressBox" v-if="info.progress < info.limitProgress">
                    <p>今日收到联赛票</p>
                    <p>
                        <span :style="'width:' + Math.floor((info.progress / info.limitProgress) * 100) + '%'"></span>
                        <span>{{ info.progress >= info.limitProgress ? 999 : info.progress }}/{{ info.limitProgress
                        }}</span>
                    </p>
                </div>
                <div class="progressBox" v-else><span class="success">恭喜！您已报名成功</span></div>
            </div>
            <div class="listBox">
                <ul class="rankList">
                    <li v-if="rank.list.length > 0" v-for="(item, index) in rank.list" :key="index">
                        <img v-if="item.state == 2" class="headImg toRoom"
                            @click="jumpRoom(item.state, item.roomId, item.showtype)" :src="item.ancPic || empty" alt="">
                        <img v-else class="headImg" :src="item.ancPic || empty" alt="">
                        <img v-if="item.state == 2" src="@/assets/img/ceremony/online.gif" alt="" class="online">
                        <p><span class="name">{{ item.anchorName || '酷炫达人' }}</span><span>ID:{{ item.anchorId }}</span></p>
                        <i>{{ item.rankNo }}</i>
                    </li>
                    <EmptyData v-else />
                </ul>
                <Pagination v-if="rank.totalPage > 0" :all="rank.totalPage" @on-change="getList" />
            </div>
        </div>
        <Toast toast-style="leg1" v-if="store.state.showType == 'leg1'">
            <p class="close" @click="store.commit('changeIsShow')" />
            <div class="ruleBox">
                <div>
                    <p>报名时间</p>
                    <p>03月21日00:00--24:00</p>
                </div>
                <div>
                    <p>报名规则</p>
                    <p>主播在本赛段规定时间内，收够999个联赛票礼物，即可报名成功</p>
                </div>
                <div>
                    <p>赛段奖励</p>
                    <p>所有晋级的主播均可获得晋级封面角标-春季联赛参赛主播</p>
                </div>
            </div>
        </Toast>
    </div>
</template>

<style lang='scss' scoped></style>